<ng-container *ngIf="(orders$ | async) as orders">
  <div class="cx-order-history container">
    <!-- HEADER -->
    <div class="cx-order-history__header"><h3>Order history</h3></div>

    <!-- BODY -->
    <div class="cx-order-history__body">
      <ng-container *ngIf="orders.pagination.totalResults > 0; else noOrder">
        <!-- Select Form and Pagination Top -->
        <div class="cx-order-history__form-pagination--top row">
          <div
            class="cx-order-history__form-group form-group col-sm-12 col-md-4 col-lg-4"
          >
            <cx-sorting
              [sortOptions]="orders.sorts"
              [sortLabels]="sortLabels"
              (sortListEvent)="changeSortCode($event)"
              [selectedOption]="orders.pagination.sort"
              [placeholder]="'Sort by Most recent'"
            ></cx-sorting>
          </div>
          <div class="cx-order-history__pagination">
            <cx-pagination
              [pagination]="orders.pagination"
              (viewPageEvent)="pageChange($event)"
            ></cx-pagination>
          </div>
        </div>
        <!-- TABLE -->
        <table class="table cx-order-history__table">
          <thead class="cx-order-history__thead--mobile">
            <th scope="col">Order #</th>
            <th scope="col">Date</th>
            <th scope="col">Status</th>
            <th scope="col">Total</th>
          </thead>
          <tbody>
            <tr
              *ngFor="let order of orders.orders"
              (click)="goToOrderDetail(order)"
            >
              <td class="cx-order-history__code">
                <div class="d-md-none cx-order-history__label">Order #</div>
                <a
                  [routerLink]="
                    {
                      route: [{ name: 'orderDetails', params: order }]
                    } | cxTranslateUrl
                  "
                  class="cx-order-history__value"
                >
                  {{ order?.code }}</a
                >
              </td>
              <td class="cx-order-history__placed">
                <div class="d-md-none cx-order-history__label">Date</div>
                <a
                  [routerLink]="
                    {
                      route: [{ name: 'orderDetails', params: order }]
                    } | cxTranslateUrl
                  "
                  class="cx-order-history__value"
                  >{{ order?.placed | date: 'longDate' }}</a
                >
              </td>
              <td class="cx-order-history__status">
                <div class="d-md-none cx-order-history__label">Status</div>
                <a
                  [routerLink]="
                    {
                      route: [{ name: 'orderDetails', params: order }]
                    } | cxTranslateUrl
                  "
                  class="cx-order-history__value"
                >
                  {{ order?.statusDisplay }}</a
                >
              </td>
              <td class="cx-order-history__total">
                <div class="d-md-none cx-order-history__label">Total</div>
                <a
                  [routerLink]="
                    {
                      route: [{ name: 'orderDetails', params: order }]
                    } | cxTranslateUrl
                  "
                  class="cx-order-history__value"
                >
                  {{ order?.total.formattedValue }}</a
                >
              </td>
            </tr>
          </tbody>
        </table>
        <!-- Select Form and Pagination Bottom -->
        <div class="cx-order-history__form-pagination--bottom row">
          <div
            class="cx-order-history__form-group form-group col-sm-12 col-md-4 col-lg-4"
          >
            <cx-sorting
              [sortOptions]="orders.sorts"
              [sortLabels]="sortLabels"
              (sortListEvent)="changeSortCode($event)"
              [selectedOption]="orders.pagination.sort"
              [placeholder]="'Sort by Most recent'"
            ></cx-sorting>
          </div>
          <div class="cx-order-history__pagination">
            <cx-pagination
              [pagination]="orders.pagination"
              (viewPageEvent)="pageChange($event)"
            ></cx-pagination>
          </div>
        </div>
      </ng-container>

      <!-- NO ORDER CONTAINER -->
      <ng-template #noOrder>
        <div class="cx-order-history__no-order row" *ngIf="(isLoaded$ | async)">
          <div class="col-sm-12 col-md-6 col-lg-4">
            <div>We have no order records for this account.</div>
            <a
              [routerLink]="{ route: ['home'] } | cxTranslateUrl"
              routerLinkActive="active"
              class="btn btn-primary btn-block"
              >Start Shopping</a
            >
          </div>
        </div>
      </ng-template>
    </div>
  </div>
</ng-container>
